﻿<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:maps="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:eim="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
    x:Class="Leuphana.GuidedTour.App.Pages.HotSpotPage"
    SupportedOrientations="Portrait" Orientation="Portrait"
    d:DataContext="{d:DesignData /SampleData/TourViewModelSampleData.xaml, Instance={x:Null}}"
    shell:SystemTray.IsVisible="True" shell:SystemTray.Opacity="0" mc:Ignorable="d">

    <phone:PhoneApplicationPage.Resources>
		<Storyboard x:Name="OpenMapPanelStoryboard">
			<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MapPanel">
				<DiscreteObjectKeyFrame KeyTime="0">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="MapPanel">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="221"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="CloseMapPanelStoryboard">
			<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="MapPanel" d:IsOptimized="True"/>
			<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MapPanel">
				<DiscreteObjectKeyFrame KeyTime="0">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
				<DiscreteObjectKeyFrame KeyTime="0:0:0.2">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Collapsed</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
		</Storyboard>
	</phone:PhoneApplicationPage.Resources>

	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>

    <!--Transitions-->
    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>
    
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar>
            <shell:ApplicationBarIconButton Click="AppBar_Prev_Click" Text="Vorherige Station" IconUri="\Toolkit.Content\appbar.chevron.left.png" />
            <shell:ApplicationBarIconButton Click="AppBar_Map_Click" Text="In Karte zeigen" IconUri="\Toolkit.Content\appbar.location.circle.png" />
            <shell:ApplicationBarIconButton Click="AppBar_Next_Click" Text="Nächste Station" IconUri="\Toolkit.Content\appbar.chevron.right.png" />
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

    <!--LayoutRoot-->
    <Grid x:Name="LayoutRoot" Background="Transparent" d:DataContext="{Binding HotSpots[0]}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--ContentPanel-->
        <Grid x:Name="ContentPanel" Grid.RowSpan="2">
            <!--BackgroundImage-->
            <Image Stretch="UniformToFill" Source="{Binding ImageSource}"/>

            <!--Highlight Buttons List-->
            <ItemsControl ItemsSource="{Binding Articles}" Visibility="{Binding HasSelectedArticle, Converter={StaticResource NegativeVisibilityConverter}}">

                <!--Change ContentPanel to canvas-->
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <!--Button Template-->
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Canvas>
                        	<Canvas.Resources>
                        		<Storyboard x:Name="LoadedStoryboard">
                        			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="button">
                        				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.2"/>
                        				<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
                        			</DoubleAnimationUsingKeyFrames>
                        			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="button">
                        				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.2"/>
                        				<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
                        			</DoubleAnimationUsingKeyFrames>
                        		</Storyboard>
                        	</Canvas.Resources>
                            <Button x:Name="button" Height="99" Width="99" Canvas.Left="{Binding Left}" Canvas.Top="{Binding Top}"
                                    Click="Button_Activate_Click" CommandParameter="{Binding ID}"
                                    Foreground="White" BorderBrush="White" Background="#6F000000"
                                    toolkit:TiltEffect.IsTiltEnabled="True" RenderTransformOrigin="0.5,0.5" >
                            	<Button.RenderTransform>
                            		<CompositeTransform ScaleX="0" ScaleY="0"/>
                            	</Button.RenderTransform>
                            	<i:Interaction.Triggers>
                            		<i:EventTrigger>
                            			<eim:ControlStoryboardAction Storyboard="{StaticResource LoadedStoryboard}"/>
                            		</i:EventTrigger>
                            	</i:Interaction.Triggers>
                            </Button>
                        </Canvas>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

            <!--Mapscontrol-->
            <Border x:Name="MapPanel" Padding="0,6,0,0" Background="Black" Height="221" VerticalAlignment="Bottom" Visibility="Collapsed">
                <maps:Map x:Name="Map" LogoVisibility="Collapsed" CopyrightVisibility="Collapsed"
                          CredentialsProvider="add your bing maps key here">
                    <maps:Pushpin x:Name="LocationPin" Background="{StaticResource PhoneAccentBrush}" Content="Standort" Visibility="Collapsed" />
                    <maps:Pushpin Location="{Binding Location}" />
                </maps:Map>
            </Border>

            <!--Overlay-->
            <Grid Background="#AF000000" Visibility="{Binding HasSelectedArticle, Converter={StaticResource VisibilityConverter}}">
                <Button Style="{StaticResource ChromelessButtonStyle}"
                        Click="Button_Deactivate_Click"/>
                <Button Style="{StaticResource ChromelessButtonStyle}" Margin="12,346,12,0"
                        VerticalAlignment="Top" HorizontalAlignment="Left"
                        Command="{Binding SelectedArticle.NavigateToCommand}"
                        CommandParameter="{Binding SelectedArticle.ID}">
                    <StackPanel Orientation="Horizontal">
                        <StackPanel Width="400">
                            <TextBlock Text="{Binding SelectedArticle.Title}" Foreground="White" Style="{StaticResource PhoneTextLargeStyle}" TextWrapping="Wrap" />
                            <TextBlock Text="{Binding SelectedArticle.Description}" Foreground="White" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" />
                        </StackPanel>
                        <Grid Height="48" Width="48" VerticalAlignment="Top" Margin="0,12,0,0">
                            <Image Source="/Toolkit.Content/appbar.arrow.right.png" Stretch="Fill"/>
                            <Image Source="/Toolkit.Content/appbar.base.png" Stretch="Fill"/>
                        </Grid>
                    </StackPanel>
                </Button>
            </Grid>
        </Grid>

        <!--TitlePanel-->
        <Border Grid.Row="0" Background="#80000000">
            <StackPanel Margin="12,17,0,0">
                <TextBlock Foreground="White" Text="{Binding Title, Converter={StaticResource UpperCaseConverter}}" Style="{StaticResource PhoneTextNormalStyle}"/>
            </StackPanel>
        </Border>
    </Grid>

</phone:PhoneApplicationPage>